<template>
    <div class="home-wrapper"> 
        <div class="tab-box flex f-mi">
            <div class="tab-list">
                <div class="items" v-for="(item,index) in tabList" :key="index" :class="activeIndex === index ? 'active':'defau'" @click="tabClick(item,index)">{{item}}</div>
            </div>
            <div class="marg-L2">
                <el-input v-model="formInline.keywords" placeholder="请输入内容" suffix-icon="el-icon-search"></el-input>
            </div>
        </div>
        <div class="category-content flex f-wp">
            <div class="item-box">全部</div>
            <div @click="cateClick(item,index)" class="item-box" v-for="(item,index) in categoryList"
                :key="index" :class="childActive.indexOf(item.category_id) > -1 ? 'box-active':'box-gray'">{{item.category_title}}
            </div>
        </div>
        <div class="search-wrap">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="全部时间">
                    <el-select v-model="formInline.time" placeholder="请选择时间">
                        <el-option v-for="(item,index) in timeList" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="线索分类">
                    <el-select v-model="formInline.category_id" placeholder="请选择分类">
                        <el-option v-for="(item,index) in categoryList" :key="index" :label="item.category_title" :value="item.category_id"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="全部地区">
                    <el-cascader clearable v-model="formInline.city" :options="areaList" @change="handleChange"></el-cascader>
                </el-form-item>
                <el-form-item label="抢单状态">
                    <el-select v-model="formInline.status" placeholder="请选择状态">
                        <el-option v-for="(item,index) in orderList" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item> 
                <el-form-item>
                    <el-button class="btn bg-blue" @click="queryClick">查询</el-button>
                    <el-button class="btn bg-gray" @click="resetClick">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table-box">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="clue_id" label="ID" :align="center" width="50">
                </el-table-column>
                <el-table-column prop="category_title" label="类型" :align="center">
                </el-table-column>
                <el-table-column prop="content" label="线索内容" width="240" :align="center">
                    <!-- <template slot-scope="scope">
                        <p @click="detailClick(scope.row)">{{scope.row.content}}</p>
                    </template> -->
                </el-table-column>
                <el-table-column prop="phone" label="电话" :align="center" width="120">
                </el-table-column>
                <el-table-column prop="create_time" label="时间" :align="center">
                </el-table-column>
                <el-table-column prop="location" label="地址" :align="center">
                </el-table-column>
                <el-table-column prop="quantity_buy" label="参与人数" :align="center">
                    <template slot-scope="scope">
                        跟进({{scope.row.quantity_buy}}/{{scope.row.quantity}})
                    </template>
                </el-table-column>
                <el-table-column prop="money_team" label="抢单/独享" :align="center">
                    <template slot-scope="scope">
                        <img style="margin-right:5px;" src="../assets/images/qd-icon.png"/>
                        <span style="color: #2A82E4;margin-right:5px;">{{scope.row.money_team}}</span>/<span style="color: #00BAAD;margin-left:5px;">{{scope.row.money_alone}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作" width="180" :align="center">
                    <template slot-scope="scope">
                        <!-- <el-button v-if="scope.row.is_buy_someone == 1 && scope.row.shop_is_buy == 0" class="gr-btn btn" type="text" size="small" @click="grabOrders(scope.row)">已抢</el-button> -->
                        <el-button v-if="(scope.row.is_buy_someone == 0 || scope.row.is_buy_someone == 1) && scope.row.shop_is_buy == 0" class="qd-btn btn" type="text" size="small" @click="grabOrders(scope.row)">抢单</el-button>
                        <el-button v-if="scope.row.is_buy_someone == 0" class="dx-btn btn" type="text" size="small" @click="aloneOrders(scope.row)">独享</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page" v-if="total > 0">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="pageSize"
                    layout="prev,pager,next,total"
                    :total="total">
                </el-pagination>
            </div>
        </div>
        <div class="hb-box" v-if="redBag && $store.state.shopId == 0">
            <p class="t-rig" @click="redBagClose">
                <img width="20px" src="../assets/images/hb-close.png" alt="">
            </p>
            <p class="pad-R1" @click="redBagClick">
                <img style="width: 80px;" src="../assets/images/hb-img.png" alt="">
            </p>
        </div>
        <detailDialog :isDialog="isDialog" :dataType="dataType" :dataInfo="dataInfo" @closeClick="closeClick" @dialogSave="dialogSave"/>
        <detail :isDetail="isDetail" :itemData="itemData" @detailClose="detailClose" @detailSave="detailSave" />
        <recharge :isDialog="isRecharge" @dialogSave="dialogSave" @closeClick="closeClick"/>
    </div>
</template>
<script>
import {request} from "../assets/js/utils/request";
import detailDialog from './detailDialog'
import detail from './detail'
import recharge from './recharge.vue'
export default{
    components: {
        detailDialog,
        detail,
        recharge
    },
    data() {
        return {
            tabList: ['最新案源','精选案源'],
            activeIndex: 0,
            formInline: {
                keywords: '',
                time: '',
                category_id: '',
                city: [],
                status: ''
            },
            choiceness: 0,
            loading: false,
            tableData: [],
            headerStyle: {
                background: '#f2f2f2',
                color: '#000'
            },
            dataTitle: '',
            currentPage: 1,
            pageSize: 10,
            total: 0,
            center: 'center ',
            categoryList: [],
            orderList: [],
            areaList: [],
            timeList: [],
            dataInfo: {},
            isDialog: false,
            dataType: '',
            isDetail: false,
            itemData: {},
            redBag: true,
            isRecharge: false,
            childActive: []
        }
    },
    created() {
        this.initData()
        this.getClueData()
    },
    methods: {
        cateClick(params) {
            let categoryIndex = this.childActive.indexOf(params.category_id);
            if (categoryIndex > -1) {
                this.childActive.splice(categoryIndex, 1);
            } else {
                this.childActive.push(params.category_id);
            }
        },
        closeClick() {
			this.isDialog = false
		},
        // 红包关闭
        redBagClose() {
            this.redBag = false            
        },
        redBagClick() {
            this.isRecharge = true
            // this.$router.push('/rechargePage')
        },
        tabClick(item,index) {
            this.activeIndex = index
            this.choiceness = index
            this.initData()
        },
        detailClick(params) {
            this.isDetail = true
            this.clueType = 'view'
            this.itemData = params
        },
        closeClick() {
            this.isDialog = false
        },
        detailSave() {
            this.detailSave = false
            this.initData()
        },
        detailClose() {
            this.isDetail = false
        },
        dialogSave() { 
            this.isDialog = false
            this.initData()
        },
        grabOrders(params) {
            this.dataType = 'garb'
            this.isDialog = true
            this.dataInfo = params
        },
        aloneOrders(params) {
            this.dataType = 'alone'
            this.isDialog = true
            this.dataInfo = params
        },
        queryClick() {
            this.initData()
        },
        resetClick() {
            this.formInline.keywords = ''
            this.formInline.time = ''
            this.formInline.category_id = ''
            this.childActive = []
            this.formInline.city = []
            this.formInline.status = ''            
            this.initData()
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.currentPage = 1
            this.initData()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.initData()
        },
        handleChange(value) {
            console.log(value);
        },
        modifyArray(array) {
            array.forEach((item) => {
                this.$set(item,'label',item.name)
                this.$set(item,'value',item.id)
                if (item.children && item.children.length > 0) {
                    this.modifyArray(item.children);
                }
            })
            return array
        },
        getClueData() {  
            // 线索分类         
            request({
                url: '/clue/category',
                method: 'get',
                data: {
                    keywords: this.formInline.keywords,
                    time: this.formInline.time,
                    category_id: this.childActive.join(','),
                    city: this.formInline.city,
                    status: this.formInline.status,
                    page: this.currentPage
                }
            }).then(res => {
                if(res.code == 200) {
                    this.categoryList = res.data.list || []
                    // this.categoryList = this.modifyArray(res.data.list)
                }
            })

            // 线索抢单状态
            request({
                url: '/config/clue/status',
                method: 'get'
            }).then(res => {
                if(res.code == 200) {
                    this.orderList = res.data.list || []
                }
            })
            // 行政区
            request({
                url: '/config/region',
                method: 'get'
            }).then(res => {
                if(res.code == 200) {
                    this.areaList = this.modifyArray(res.data.list)
                }
            })
            // 线索搜索时间
            request({
                url: '/config/clue/time',
                method: 'get'
            }).then(res => {
                if(res.code == 200) {
                    this.timeList = res.data.list || []
                }
            })
        },
        initData() {
            let getUrl = `/clue/list?page=${this.currentPage}&choiceness=${this.choiceness}`
            if(this.formInline.keywords) {
                getUrl += `&keywords=${this.formInline.keywords}`
            }
            if(this.formInline.time) {
                getUrl += `&time=${this.formInline.time}`
            }
            if(this.childActive.length > 0) {
                let category_id = this.childActive.join(',')
                getUrl += `&category_id=${category_id}`
            }
            if(this.formInline.city) {
                getUrl += `&city=${this.formInline.city}`
            }
            if(this.formInline.status) {
                getUrl += `&status=${this.formInline.status}`
            }
            request({
                url: getUrl,
                method: 'GET'
            }).then(res => {
                if(res.code == 200) {
                    this.tableData = res.data.list || []
                    this.total = res.data.quantity
                    this.loading = false
                    // if (this.tableData.length === 1) {
                    //     this.currentPage--
                    //     if (this.currentPage <= 0) {
                    //         this.currentPage = 1
                    //     }
                    // }
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.home-wrapper{
    padding: 10px;
    border-radius: 8px;
    background: #fff;
    .hb-box{
        position: fixed;
        right: 20px;
        bottom: 20px;
        z-index: 10;
    }
    /deep/.tab-box{
        .tab-list{
            display: flex;
            .items{
                width: 140px;
                text-align: center;
                line-height: 40px;
                position: relative;
                font-size: 18px;
                cursor: pointer;
            }
            .defau{
                color: #66728C;
            }
            .active{
                color: #222E4F;
                position: relative;
            }
            .active::after{
                position: absolute;
                left: 47px;
                bottom: 0;
                content: "";
                width: 40px;
                height: 3px;
                opacity: 1;
                border-radius: 20px;
                background: rgba(34, 46, 79, 1);
            }
        }
        .el-input{
            width: 100%;
            .el-input__inner{
                height: 32px;
                border-radius: 35px;
            }
        }
        .el-input__icon{
            line-height: 32px;
        }
    }
    .notice{
        padding: 100px 0;
        text-align: center;
        h1{
            color: #333;
            font-size: 24px;
            margin: 40px 0;
        }
        .title{
            padding-left: 15px;
            font-size: 16px;
            font-weight: 100;
            line-height: 50px;
        }
        .content{
            display: flex;
            justify-content: space-between;
            // padding: 20px;
            .box{
                width: 50%;
                height: 80px;
                padding: 20px;
                border-radius: 4px;
                margin: 0 10px;
                color: #fff;
                display: flex;
                justify-content: space-between;
                .icon{
                    font-size: 28px;
                }
                p{
                    display: inline-block;
                    font-size: 28px;
                    margin-left: 20px;
                }
            }
            .box-bg1{
                background: linear-gradient(270deg, #ffa143 0%, #f27727 100%);
            }
            .box-bg2{
                background: linear-gradient(270deg, #3cd0ee 0%, #1ea5df 100%);
            }
        }
    }
    .category-content {
        // padding: 20rpx 10rpx;
        margin-top: 20px;
        .item-box {
            font-size: 14px;
            width: auto;
            min-width: 80px;
            text-align: center;
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            margin-right: 10px;
            margin-bottom: 10px;
            text-align: center;
            border-radius: 6px;
            cursor: pointer;
        }
        .box-gray {
            color: #808080;
            background: #F7F7F7;
        }

        .box-active {
            color: #fff;
            background: #2967E3;
        }
    }
}
/deep/.search-wrap{
    margin: 10px 0;
    padding: 10px;
    // display: flex;
    // flex-wrap: wrap;
    background: #F5F6FA;
    .el-form-item{
        margin-bottom: 0;
    }
    .btn{
        padding: 0;
        width: 80px;
        height: 32px;
        border: none;
        // background: #016aed;
    }
    .bg-blue{
        color: #ffffff;
        background: #2967E3;
    }
    .bg-gray{
        color: #000;
        border: 1px solid #ddd;
        background: #fff;
    }
    .el-select {
        width: 100%;
    }
    .el-input{
        width: 150px;
        .el-input__inner{
            height: 32px;
        }
    }
    .el-date-editor{
        width: 100%;
        .el-input{
            width: 100%;
        }
        .el-input__prefix{
            .el-input__icon{
                line-height: 32px;
            }
        }
        .el-input__suffix{
            .el-input__suffix-inner{
                .el-input-circle-close{
                    line-height: 32px;
                }
            }
        }
    }
}
/deep/.el-table{
    .btn{
        font-size: 12px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        width: 59px;
        height: 30px;
        line-height: 30px;
        opacity: 1;
        border-radius: 5px;
        padding: 0;
    }
    .gr-btn{
        color: #333;
        background: #F5F6FA;
    }
    .qd-btn{
        background: #2967E3;
    }
    .dx-btn{
        background: #00BAAD;
    }
}
</style>